<template>
  <div class="activity-page" id="app">
    <div class="act-banner"></div>
    <div class="act-con">
      <div class="act-tab-menu">
        <!-- 选中的在menu-item上加cur -->
        <div :class="['menu-item',current=='0'?'cur':'']" v-on:click="tabChange(0)">
          <div>活动一</div>
          <div><span>笃行</span><span>共读</span></div>
        </div>
        <div class="square-mark"></div>
        <div :class="['menu-item',current=='1'?'cur':'']" v-on:click="tabChange(1)">
          <div>活动二</div>
          <div><span>笃行</span><span>共行</span></div>
        </div>
        <div class="square-mark"></div>
        <div :class="['menu-item',current=='2'?'cur':'']" v-on:click="tabChange(2)">
          <div>活动三</div>
          <div><span>笃行</span><span>共习</span></div>
        </div>
      </div>
      <div class="act-detail">
        <!-- 共读 -->
        <div class="panel-read" v-show="current=='0'?true:false">
          <p>即日起至2022年3月15日，知网研学特开展2022年寒假“笃行•共读”读者服务活动，以保障全国高校、中小学的师生在寒假居家期间，可以不受IP限制，顺畅地使用研学平台学习、办公。
          </p>
          <p class="font-w read-tip">参与方式如下</p>
          <div class="apply-block">
            <h3>1. 高校申请</h3>
            <div class="apply-item">
              <div class="item-t">
                <img src="@/assets/winterActivity/images/user.png" alt="">
                <p><span class="font-w">学校申请：</span>校图书馆、研究生院、教务处、科研处、各学院等部门负责人，即日起可以联系知网人员，为师生开通知网研学使用权限。</p>
              </div>
              <a class="btn-a" href="https://www.wjx.cn/jq/75177669.aspx"  target="_blank">联系我们</a>
            </div>
            <div class="apply-item">
              <div class="item-t">
                <img src="@/assets/winterActivity/images/code.jpg" alt="">
                <p><span class="font-w">个人申请：</span>本校尚未统一开通研学使用权限的本科高校师生，可以在研学平台进行师生认证。审核通过后，寒假期间每天可以免费阅读<span class="co">20篇</span>文献。</p>
              </div>
              <a class="btn-a" href="javascript:;" v-on:click="getAuthentication" target="_blank">立即认证</a>
            </div>
          </div>
          <div class="apply-block">
            <h3>2. 中小学申请</h3>
            <div class="apply-item">
              <div class="item-l">
                <p>全国中小学教师扫码或点击以下链接，填写个人信息后，即可开通知网研学（基础教育版）使用权限。</p>
                <img class="code-img" src="@/assets/winterActivity/images/school.png" alt="">
              </div>
              <p><a class="link-a" href="https://x.cnki.net/team/#/invitePage?teamId=a1b6a8ab-af83-4ff8-a205-14e46335b229"  target="_blank">https://x.cnki.net/team/#/invitePage?teamId=a1b6a8ab-af83-4ff8-a205-14e46335b229</a></p>
              <p class="font-light">开通后，教师在寒假居家期间可不受IP限制，在知网研学平台免费阅读基础教育文献。</p>
              <p>寒假期间，知网研学定期开展《“悦读悦写”中小学教师寒假读者服务月专题培训》直播讲座，教师可通过以下链接进行学习：</p>
              <p><a class="link-a" href="https://k.cnki.net/NewTheme/Index/433" target="_blank">https://k.cnki.net/NewTheme/Index/433</a></p>
            </div>
          </div>
        </div>
        <!-- 共行 -->
        <div class="panel-works" v-show="current=='1'?true:false">
          <!-- 投稿展示部分 -->
          <div class="works-show" v-if="active">
            <p class="works-tip">1月20日-2月28日，师生可以将自己寒假期间学习、社会实践、社会服务的照片、文章感悟等内容，上传至研学平台，参加优秀作品评选，就有机会获得活动奖励。每人限投稿一次。</p>
            <!-- <a class="btn-a" href="javascript:;" @click="contributionBtn">点击立即投稿</a> -->
             <a class="btn-a" href="javascript:;">投稿已截止</a>
            <div class="works-block">
              <h3><span class="works-t">作品要求</span></h3>
              <div class="works-item">
                <h4>(1)照片类</h4>
                <p>主题自拟，投稿时附上题目和200以内文字说明，照片需为本人原创；</p>
              </div>
              <div class="works-item">
                <h4>(2)文章类</h4>
                <p>寒假实践报告、图书/文献读后感、主旋律影片观后感等稿件均可，题目自拟，要求字数不少于1000字，作品为本人原创，未在公开纸媒或网络媒体上发表过。</p>
              </div>
            </div>
            <div class="works-block">
              <h3><span class="works-t">活动奖品</span></h3>
              <div class="works-item">
                <p>按照作品形式，分为照片组、文章组两组，每组分别评选优秀获奖作品。一、二、三等和优秀奖的获奖人数分别是参与人数的1%、5%、10%、20%。</p>
              </div>
              <ul class="gift-ul">
                <li>
                  <div class="cr">一等奖</div>
                  <img src="@/assets/winterActivity/images/gift1.png" alt="">
                  <div class="gift-title">
                    <p>Tiger保温杯</p>
                  </div>
                </li>
                <li>
                  <div class="cr">二等奖</div>
                  <img src="@/assets/winterActivity/images/gift2.png" alt="">
                  <div class="gift-title">
                    <p>知网研学</p>
                    <p>自带双线充电宝</p>
                  </div>
                </li>
                <li>
                  <div class="cr">三等奖</div>
                  <img src="@/assets/winterActivity/images/gift3.png" alt="">
                  <div class="gift-title">
                    <p>知网研学</p>
                    <p>无线蓝牙鼠标</p>
                  </div>
                </li>
                <li>
                  <div class="cr">四等奖</div>
                  <img src="@/assets/winterActivity/images/gift4.png" alt="">
                  <div class="gift-title">
                    <p>知网研学</p>
                    <p>精品帆布背包</p>
                  </div>
                </li>
              </ul>
            </div>
          </div>
          <!-- 投稿上传部分 -->
          <div class="works-upload" v-else>
            <h3>投稿上传</h3>
            <div class="upload-con">
              <el-form
               ref="fileForm"
               :rules="formRule"
               v-bind:model="formList"
              >
                <div class="step-t">第一步：作品说明</div>
                <div class="step-detail">
                  <el-form-item label="作品标题：" prop="title">
                    <el-input v-model="formList.title" placeholder="请输入标题"></el-input>
                  </el-form-item>
                  <el-form-item label="作品简介：" prop="desc">
                    <el-input type="textarea" v-model="formList.desc" maxlength="200" resize="false" placeholder="请输入作品简介，不超过200字">
                    </el-input>
                  </el-form-item>
                  <el-form-item label="作品类型：" prop="type">
                    <el-select v-model="formList.type">
                      <el-option  v-for="item in options"
                                            :key="item.value"
                                            :label="item.label"
                                            :value="item.value"
                                            >{{item.label}}</el-option>
                    </el-select>
                  </el-form-item>
                </div>
                <div class="step-t">第二步：上传作品</div>
                   <div class="step-detail">
                      <el-form-item label="上传作品：" prop="file">
                          <el-upload class="upload-demo"
                              ref="fileUpload"
                              :action="fileAction"
                              :headers="headerCookie"
                              :data="uploadFormData"
                              :on-preview="handlePreview" 
                              :on-remove="handleRemove"
                              :before-upload="beforeUpload"
                              :before-remove="beforeRemove"
                              :show-file-list="true"
                              :on-change="onChange"
                              :on-success="successHandler"
                              :on-error="failHandle"
                              :limit="1"
                              accept=".doc,docx,.pdf,.txt,.bmp,.jpg,.png,.jpeg"
                              :auto-upload="false"
                              :on-exceed="handleExceed" 
                              >
                              <el-button class="btn-blue">选择文件</el-button>
                              <span slot="tip"
                                  class="el-upload__tip">请上传*.doc，*.docx，*.pdf，*.txt，*.bmp，*.jpg，*.png，*.jpeg格式的文档，限制大小20M。</span>
                          </el-upload>
                      </el-form-item>

                  </div>
                  <div class="submit-con">
                      <el-button 
                      :class='["btn-blue btn-submit",submitStatus?"disableCss":""]'
                      v-on:click="submitContribution"  
                      :disabled="submitStatus"
                      >{{submitBtnMsg}}</el-button>
                  </div>
              </el-form>
            </div>
          </div>
        </div>
        <!-- 共习 -->
        <div class="panel-learn" v-show="current=='2'?true:false">
          <ul class="learn-ul">
            <li>
              <div class="learn-l">
                <p class="title">1. 立斋书院▪论文读写冬令营—农林专场</p>
                <p>授课专家：北京林业大学博士生导师 张宇清教授 </p>
                <p>直播时间：1月18日-1月20日</p>
                <img src="@/assets/winterActivity/images/net1.png" alt="">
                <div class="btn-a-box">
                  <span class="arrow-mark mark-l"></span>
                  <a href="https://k.cnki.net/NewTheme/Index/431" class="btn-a" target="_blank">点此了解活动详情</a>
                  <span class="arrow-mark mark-r"></span>
                </div>
              </div>

            </li>
            <li>
              <div class="learn-l">
                <p class="title">2. 2022年“论文读写入门”系列公益讲座</p>
                <p>适用对象：本科大三、大四、研一及其他感兴趣的人员</p>
                <p>直播时间：2月21日-2月25日</p>
                <img src="@/assets/winterActivity/images/net2.png" alt="">
                <div class="btn-a-box">
                  <span class="arrow-mark mark-l"></span>
                  <a href="https://k.cnki.net/NewTheme/Index/435" class="btn-a"  target="_blank">点此了解活动详情</a>
                  <span class="arrow-mark mark-r"></span>
                </div>

              </div>

            </li>
            <li>
              <div class="learn-l">
                <p class="title">3.“新时代中国科学家精神”系列专题讲座</p>
                <p>为大力弘扬科学家精神，强化广大青年的科技创新意识，中国知网•知网研学计划将于2月-3月举办“新时代中国科学家精神”专题讲座，邀请各领域顶尖科学家、学者直播开讲。讲座详情将逐步更新，可关注知网研学微信公众号或B站了解最新消息。 </p>
              </div>
            </li>
          </ul>
        </div>
      </div>
    </div>
    <div class="act-footer">
      <p>本次活动最终解释权归属《中国学术期刊（光盘版）》电子杂志社有限公司</p>
      <p>© 1998-2022 中国知网（CNKI）</p>
    </div>

  </div>
</template>
<script>  
import qs from 'qs'
import config from '../../api/apiConfig'
import {getCookie,histroyCookieDel} from "../../plugin/common"
import {contribution,getIsOrSubmit} from '../../api/winter'
export default {
  components: {
  },
  data(){
    return{
      current:0,
      active:true,//投稿
      activityId:'4028b2317e57b9ba017e57bb9d820001',//活动id
      fileList:[],
      submitStatus:false,
      submitBtnMsg:"提交投稿",
      options:[
        {
          value:0,
          label:'图片'
        },
        {
          value:1,
          label:'文本'
        }
      ],
      typeList:{
          "doc":1,
          "docx":1,
          "pdf":1,
          "txt":1,
          "bmp":0,
          "jpg":0,
          "png":0,
          "jpeg":0
      },
      formList:{
        title:'',
        desc:'',
        type:0,
      },
    //   this.formList.file.length>0?this.fileList.file[0].raw:
      formRule: {
        title: [
          { required: true, message: '请输入标题', trigger: 'blur' },
          { min: 1, max: 10, message: `长度在1到 10 个字符`, trigger: 'blur' },
          // { validator: validateName, trigger: 'blur' }
        ],
        desc: [
          { required: true, trigger: 'blur',message: '请输入简介'},
          { min: 1, max: 200, message: `长度在1到 200 个字符`, trigger: 'blur' },
          // { validator: validateSpecial, trigger: 'blur' },
          // { validator: schoolNameValidate , trigger: 'blur' }
        ],
        type: [
          { required: true, trigger: 'blur', message: '请选择类型' },
        ],
        file:[
            //  { required: true, trigger: 'blur', message: '请选择文件' },
        ]
      },
    }
  },
  computed:{
      getEnvironment() {
        const UA = window.navigator.userAgent.toLowerCase();
        // const UA=("psmc.app.iphone;psmc.app.ios;Mozilla/5.0 (iPhone; CPU iPhone OS 14_3 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Mobile/15E148").toLowerCase();
        const isAndroid = (UA && UA.indexOf('android') > 0&&/psmc/ig.test(UA));
        const isIOS = (UA && /iphone|ipad|ipod|ios/ig.test(UA)&&/psmc/ig.test(UA));
        if (isAndroid) {
            return 'Android';
        } else if (isIOS) {
            return 'IOS';
        } else {
            return 'web'
        }
    },
      uploadFormData(){
          return{
              activityId:this.activityId,
              title:this.formList.title,
              introduction:this.formList.desc,
              type:this.formList.type,
              organId:'sss'
          }
      },
      headerCookie: function () {
      if (window.location.host.indexOf("localhost") >= 0) {
        return { "accesstoken": config.DEV_Token };
      } else {
        return { "accesstoken": getCookie(config['enveriment']) };
      }
    },
    fileAction: function () {
        return config.MEMBER_API_HOST + `/activity/contribution` 
    },
  },
  methods: {
  getAuthentication(){
      if (this.getEnvironment=='Android') {
          android.open('tofillinfo');
      } else if (this.getEnvironment=='IOS') {
          window.webkit.messageHandlers.jsToOC.postMessage('ToFillinfo');
      }else{
        window.open("https://ssox.cnki.net/account/app.html#/personalInformation")
      }
  },
  tabChange(i){
    this.current=i;
    this.active=true;
  },
  failHandle(){
      let vm=this;
      vm.$refs.fileUpload.clearFiles();
  },
  successHandler(res){
      let vm=this;
      vm.$refs.fileUpload.clearFiles();//清除upload文件
      vm.$refs.fileForm.resetFields();//重置表单
      if(res.success){
          vm.$tips({
          type:"success",
          content:"上传成功"
      });
      vm.submitStatus=true;
      vm.submitBtnMsg="已投稿";
      }else{
        vm.$tips({
          type:"error",
          content:res.message
      });
      if(res.errcode===401||res.errcode===-1){
        vm.login();
      }

      }
      
  },
  onChange(file, fileList){
      let vm=this;
      vm.fileList=[];
      const typeArr=file.name.split(".");
      const type=typeArr[typeArr.length-1];
      if(vm.typeList[type]==0||vm.typeList[type]==1){
          if(vm.typeList[type]==vm.formList.type){
            
          }else{
              vm.formList.type=vm.typeList[type];
            //   vm.fileList.push(fileList[fileList.length - 1]);
          }
        vm.fileList.push(fileList[fileList.length - 1]);
        //   vm.uploadFormData.file(vm.formList.file[0]);
      }else{
         this.$tips({
            content:'请选择指定类型文件',
            type:'warn'
            });
          vm.$refs.fileUpload.clearFiles();
          return;
      }

  },
  beforeUpload(file){
        const isLt2M = file&&file.size / 1024/1024 < 20;
        console.log(isLt2M)
        if (!isLt2M&&file) {
          this.$tips({
            content:'文件大小不能超过 20MB!',
            type:'error'
            });
        }
        return isLt2M
  },
  handleRemove(file, fileList) {
    this.fileList=[];
  },
  handlePreview(file) {
  },
  handleExceed(files, fileList) {
    this.$tips({
      type:"warn",
      content:`当前限制选择 1个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`
    })
  },
  beforeRemove(file, fileList) {
      if(file){
        return this.$confirm('此操作将永久删除该文件, 是否继续?')
        // , '提示', {
        //   confirmButtonText: '确定',
        //   cancelButtonText: '取消',
        //   type: 'warning'
        // }).then(() => {
        //   this.$tips({
        //        type:"success",
        //        content:"删除成功!"
        //     });
        // //  this.fileList=[];
        // }).catch(() => {
        //   this.$tips({
        //        type:"warn",
        //        content:"已取消删除!"
        //     });
        // });
      }

    //   return this.$confirm(`确定移除 ${ file.name }？`);
  },
 submitContribution(){
     let vm=this;
     vm.$refs.fileForm.validate((valid) => {
         if(valid){
            if(vm.fileList.length==0){
            vm.$tips({
               type:"error",
               content:"请选择文件!"
            })
             return;
            }else{
                vm.$refs.fileUpload.submit();
            }
         }
     })
 },
    getSubmit(){
        let vm=this;
        const token=window.location.href.indexOf("localhost")>0?config["DEV_Token"]:getCookie(config["enveriment"])
        getIsOrSubmit(token).then(res=>{
            if(res&&res.success){
                vm.submitStatus=false;
                vm.submitBtnMsg="提交投稿";
            }else{
                vm.submitStatus=true;
                vm.submitBtnMsg="已投稿";
            }
        })
    },
    login(){
      let newHref=config["YX_WEB"]+'/search/common/login?returnUrl='+config['returnURL']+'?appId='+config['appid'];
      window.location.href=newHref;
    },
    contributionBtn(){
        if(!getCookie(config['enveriment'])){
              this.login()
        }else{
            this.active=false;
        }
    }
  },
  mounted () {
      let vm=this;
      if(window.location.href.indexOf(config['enveriment'])>0){
              let lid = qs.parse(window.location.href.split("?")[1]);
              let calLID = lid[config['enveriment']] || lid[config['enveriment'].toLowerCase()];
          if (calLID) {
              vm.$cookies.set(config['enveriment'], decodeURIComponent(calLID), 60 * 60 * 24, '/', '.cnki.net');
              histroyCookieDel();
          }
          }
      if(getCookie(config['enveriment'])){
          vm.getSubmit()
      }
  }
}
</script> 
<style>
.submit-con .disableCss,.submit-con .disableCss:hover{
    background-color: #FFF;
    border-color: #EBEEF5;
    color: #999;
}
</style>
  

